/**
 * @name EstartChart
 * @desc 星星
 */
import React, { Component } from "react"
import echarts from "echarts/lib/echarts"
// 引入柱状图
import "echarts/lib/chart/pictorialBar"
// 引入提示框和标题组件
import "echarts/lib/component/tooltip"
import "echarts/lib/component/title"

import "./styles.css"

const spirit =
  "path://M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 0 0 .6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0 0 46.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"

class EstartChart extends Component {
  state = { buffer: [], nowId: "" }

  myChart = null

  componentDidMount() {
    this.init()
  }

  componentDidUpdate() {
    const { buffer = 0, nowId } = this.state
    const { data = 0, ids } = this.props
    if (nowId !== ids) {
      this.init()
      this.setState({ nowId: ids })
    }
  }
  init = () => {
    const { ids } = this.props
    // 基于准备好的dom，初始化echarts实例
    this.myChart = echarts.init(document.getElementById(ids))
    this.updateData()

    this.myChart.resize()
  }
  updateData = () => {
    const { data } = this.props
    // 绘制图表
    let maxData = 5
    this.myChart.setOption({
      tooltip: {
        // trigger: 'item',
        formatter: `${data * 20}%`
      },
      color: ["#FE8405"],
      xAxis: {
        max: 5,
        splitLine: { show: false },
        offset: 10,
        symbol: "none",
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,0)"
          }
        },
        axisLabel: {
          margin: 10
        }
      },
      yAxis: {
        data: [],
        inverse: false,
        axisTick: { show: false },
        axisLine: { show: false },
        symbol: "none"
      },
      grid: {
        // top: 'center',
        // height: 200,
        // left: 70,
        // right: 100,
      },
      series: [
        {
          // current data
          type: "pictorialBar",
          symbol: spirit,
          symbolRepeat: "fixed",
          symbolMargin: "5%",
          symbolClip: true,
          symbolSize: 23,
          symbolBoundingData: maxData,
          data: [data],
          z: 10
        },
        {
          // full data
          type: "pictorialBar",
          itemStyle: {
            normal: {
              opacity: 0.2
            }
          },
          label: {
            show: false,
            // formatter: function (params) {
            //     return (params.value / maxData * 100).toFixed(1) + ' %';
            // },
            position: "right",
            offset: [10, 0],
            color: "green",
            fontSize: 18
          },
          animationDuration: 0,
          symbolRepeat: "fixed",
          symbolMargin: "5%",
          symbol: spirit,
          symbolSize: 23,
          symbolBoundingData: maxData,
          data: [data],
          z: 5
        }
      ]
    })
  }
  render() {
    const { ids } = this.props

    return <div id={ids} className="start"></div>
  }
}
export default EstartChart
